<template>
  <div class="container">
    <div class="title1">合格率</div>
    <div class="title2">检测数量</div>
    <div id="exhartX" style="width: 55%; height: 100%"></div>
    <div style="width: 45%; height: 100%">
      <Pie2 ref="pie2Ref"></Pie2>
    </div>
  </div>
</template>
<script>
import * as echarts from "echarts";
import Pie2 from "./pie2.vue";
import { getJcxmByMarketATy, getJcxmLbByMarketATy } from "@/util/home.js";
export default {
  name: "",
  components: { Pie2 },
  mixins: [],
  props: {},
  data() {
    return {
      option1: {},
      option2: {},
    };
  },
  inject: ["currentMarketId"],
  computed: {},
  watch: {},
  mounted() {
    // this.getInit();
  },
  methods: {
    getInit() {
      let marketId = this.currentMarketId();
      if (marketId) {
        this.$refs.pie2Ref.getInit();
      }
      getJcxmByMarketATy({ marketId: this.currentMarketId() }).then((res) => {
        var myChart = echarts.init(document.getElementById("exhartX"), null, {
          devicePixelRatio: 2.5,
        });
        myChart.clear();
        let yLabel = res.data.data.map((item) => item.name);
        let yData = res.data.data.map((item) => parseInt(item.bfb));
        let jcsumList = res.data.data.map((item) => item.jcsum);
        let bgData = [];
        for (let i in yData) {
          bgData.push(100);
        }
        let aaa = yData.map((item, index) => {
          return (
            ((item / 100) * 100).toFixed(0) +
            "%" +
            "        " +
            `${jcsumList[index]}`
          );
        });
        this.option1 = {
          title: {
            text: "检测项目",
            textStyle: {
              color: "#0FFFFF",
              fontSize: 14,
              // fontWeight:'none'
            },
            top: "8",
          },
          grid: {
            left: "2%",
            right: "5%",
            bottom: "2%",
            top: "15%",
            containLabel: true,
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "none",
            },
            formatter: function (params) {
              return (
                params[0].name +
                "<br/>" +
                "<span style='display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:rgba(36,207,233,0.9)'></span>" +
                params[0].seriesName +
                " : " +
                params[0].value +
                "%" +
                " <br/>"
              );
            },
          },
          xAxis: {
            show: false,
            type: "value",
          },
          dataZoom: [
            //滑动条
            {
              yAxisIndex: 0, //这里是从X轴的0刻度开始
              show: false, //是否显示滑动条，不影响使用
              type: "slider", // 这个 dataZoom 组件是 slider 型 dataZoom 组件
              startValue: 0, // 从头开始。
              endValue: 5, // 一次性展示6个。
            },
          ],
          yAxis: [
            {
              type: "category",
              inverse: true,
              axisLabel: {
                show: true,
                margin: 15,
                textStyle: {
                  color: "#2a82fd",
                },
              },
              splitLine: {
                show: false,
              },
              axisTick: {
                show: false,
              },
              axisLine: {
                show: false,
              },
              data: yLabel,
            },
            {
              type: "category",
              inverse: true,
              axisTick: "none",
              axisLine: "none",
              show: false,
              axisLabel: {
                textStyle: {
                  color: "#1AED83",
                  fontSize: "12",
                },
              },
              data: yData.map((item, index) => {
                return (
                  ((item / 100) * 100).toFixed(0) +
                  "%" +
                  "        " +
                  `${jcsumList[index]}`
                );
              }),
            },
          ],
          series: [
            {
              name: "合格率",
              type: "bar",
              zlevel: 1,
              // label: {
              //   show: true,
              //   position: "right",
              //   valueAnimation: true,
              //   formatter: function (params) {
              //     console.log(params);
              //     return params.data + "%        " + jcsumList[params.dataIndex];
              //   },
              // },
              itemStyle: {
                //new echarts.graphic.LinearGradient(右,下,左,上,渐变值)
                //彩色渐变
                color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                  { offset: 0, color: "#04c7ff" },
                  { offset: 0.5, color: "#f8ff43" },
                  { offset: 1, color: "#04c7ff" },
                ]),
                //底部透明渐变
                // color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                //     { offset: 0, color: 'rgba(7,25,41,0)' },
                //     { offset: 0.5, color: 'rgba(8,229,255,0.8)' },
                //     { offset: 1, color: '#00cafc' },
                // ]),
              },
              barWidth: 15,
              data: yData,
            },
            {
              name: "背景",
              type: "bar",
              barWidth: 15,
              barGap: "-100%",
              data: bgData,
              itemStyle: {
                normal: {
                  color: "#091B49",
                  borderWidth: 1,
                  borderColor: "#00ffff",
                },
              },
              label: {
                show: true,
                position: "right",
                color: "#fff",
                valueAnimation: true,
                formatter: function (params) {
                  return aaa[params.dataIndex];
                },
              },
            },
          ],
        };

        myChart.setOption(this.option1);
        //通过定时器的方式刷新，改变statrValue，endValue
        setInterval(() => {
          // 每次向后滚动一个，最后一个从头开始。
          if (this.option1.dataZoom[0].endValue == jcsumList.length) {
            this.option1.dataZoom[0].endValue = 6;
            this.option1.dataZoom[0].startValue = 0;
          } else {
            this.option1.dataZoom[0].endValue =
              this.option1.dataZoom[0].endValue + 1;
            this.option1.dataZoom[0].startValue =
              this.option1.dataZoom[0].startValue + 1;
          }
          myChart.setOption(this.option1);
        }, 2000);
        window.addEventListener("resize", function () {
          myChart.resize();
        });
      });
    },
    getInit2() {},
  },
};
</script>
<style lang="less" scoped>
.container {
  height: 100%;
  display: flex;
  position: relative;

  .title1 {
    position: absolute;
    font-size: 14px;
    left: 36%;
    top: 4%;
    color: #0fffff;
  }

  .title2 {
    font-size: 14px;
    left: 45%;
    top: 4%;
    position: absolute;
    color: #0fffff;
  }
}
</style>
